﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="wpOceans">
    <link rel="shortcut icon" type="image/png" href="assets/images/favicon.png">
    <title>Pengu - eCommerce HTML5 Template</title>
    <link href="assets/css/themify-icons.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/flaticon.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/animate.css" rel="stylesheet">
    <link href="assets/css/owl.carousel.css" rel="stylesheet">
    <link href="assets/css/owl.theme.css" rel="stylesheet">
    <link href="assets/css/slick.css" rel="stylesheet">
    <link href="assets/css/slick-theme.css" rel="stylesheet">
    <link href="assets/css/swiper.min.css" rel="stylesheet">
    <link href="assets/css/owl.transitions.css" rel="stylesheet">
    <link href="assets/css/jquery.fancybox.css" rel="stylesheet">
    <link href="assets/css/odometer-theme-default.css" rel="stylesheet">
    <link href="assets/sass/style.css" rel="stylesheet">
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>

<body>

    <!-- start page-wrapper -->
    <div class="page-wrapper">
        <!-- start preloader -->
        <div class="preloader">
            <div class="vertical-centered-box">
                <div class="content">
                    <div class="loader-circle"></div>
                    <div class="loader-line-mask">
                        <div class="loader-line"></div>
                    </div>
                    <img src="assets/images/preloader.png" alt="">
                </div>
            </div>
        </div>
        <!-- end preloader -->

        <!-- Start header -->
        <header id="header" class="wpo-header-style-2">
            <!-- end topbar -->
            <div class="wpo-site-header">
                <nav class="navigation navbar navbar-expand-lg navbar-light">
                    <div class="container-fluid">
                        <div class="row align-items-center">
                            <div class="col-lg-3 col-md-3 col-3 d-lg-none dl-block">
                                <div class="mobail-menu">
                                    <button type="button" class="navbar-toggler open-btn">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar first-angle"></span>
                                        <span class="icon-bar middle-angle"></span>
                                        <span class="icon-bar last-angle"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-6 col-6">
                                <div class="navbar-header">
                                    <a class="navbar-brand" href="index-4.html"><img src="assets/images/logo-2.svg"
                                            alt="logo"></a>
                                </div>
                            </div>
                            <div class="col-lg-8 col-md-1 col-1">
                                <div id="navbar" class="collapse navbar-collapse navigation-holder">
                                    <button class="menu-close"><i class="ti-close"></i></button>
                                    <ul class="nav navbar-nav mb-2 mb-lg-0">
                                        <li>
                                            <a class="active" href="index-4.html">Home</a>
                                        </li>
                                        <li><a href="shop.html">Shop</a></li>
                                        <li>
                                            <a href="cart.html">Cart</a>
                                        </li>
                                        <li><a href="contact.html">Contact Us</a></li>
                                    </ul>
                                </div><!-- end of nav-collapse -->
                            </div>
                            <div class="col-lg-2 col-md-2 col-2">
                                <div class="header-right">
                                    <div class="mini-cart">
                                        <button class="cart-toggle-btn"> <i
                                                class="fi flaticon-shopping-cart"></i></button>
                                        <div class="mini-cart-content">
                                            <button class="mini-cart-close"><i class="ti-close"></i></button>
                                            <div class="mini-cart-items">
                                                <div class="mini-cart-item clearfix">
                                                    <div class="mini-cart-item-image">
                                                        <a href="shop.html"><img
                                                                src="assets/images/shop/mini-cart/img-1.jpg" alt></a>
                                                    </div>
                                                    <div class="mini-cart-item-des">
                                                        <a href="shop.html">White Wedding Shoe</a>
                                                        <span class="mini-cart-item-price">$100.15 x 1</span>
                                                        <span class="mini-cart-item-quantity"><a href="#"><i
                                                                    class="ti-close"></i></a></span>
                                                    </div>
                                                </div>
                                                <div class="mini-cart-item clearfix">
                                                    <div class="mini-cart-item-image">
                                                        <a href="shop.html"><img
                                                                src="assets/images/shop/mini-cart/img-2.jpg" alt></a>
                                                    </div>
                                                    <div class="mini-cart-item-des">
                                                        <a href="shop.html">Long Sleeve Tops</a>
                                                        <span class="mini-cart-item-price">$230.25 x 2</span>
                                                        <span class="mini-cart-item-quantity"><a href="#"><i
                                                                    class="ti-close"></i></a></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mini-cart-action clearfix">
                                                <span class="mini-checkout-price">Subtotal: <span>$330.35</span></span>
                                                <div class="mini-btn">
                                                    <a href="checkout.html" class="view-cart-btn s1">Checkout</a>
                                                    <a href="cart.html" class="view-cart-btn">View Cart</a>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="header-search-form-wrapper">
                                        <div class="cart-search-contact">
                                            <button class="search-toggle-btn"><i class="fi flaticon-loupe"></i></button>
                                            <div class="header-search-form">
                                                <form>
                                                    <div>
                                                        <input id="searchText" type="text" class="form-control"
                                                            placeholder="Search here...">
                                                        <button id="searchBtn">
                                                            <i class="fi flaticon-loupe"></i>
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="header-login">
                                        <a class="login-btn" href="login.html"><i class="fi flaticon-user"
                                                style="color: #fff;"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- end of container -->
                </nav>
            </div>
        </header>
        <!-- end of header -->

        <!-- start of wpo-hero-section-1 -->
        <section class="hero hero-slider-wrapper hero-style-2">
            <div class="hero-slider">
                <div class="slide">
                    <div class="container">
                        <div class="row">
                            <div class="col col-lg-6 col-md-8 col-sm-12 slide-caption">
                                <div class="slide-title">
                                    <h2>Lets Shop & Get the
                                        Best Discounts </h2>
                                </div>
                                <div class="slide-subtitle">
                                    <p>Atnon ullamcorper amet nulla tortor sed quis quam. Sitortor tristique ante vel
                                        viverra.
                                        Sed pretium suscipit nec estquam.</p>
                                </div>
                                <div class="btns">
                                    <a href="shop.html" class="theme-btn">Start Shopping</a>
                                </div>
                            </div>
                        </div>
                        <div class="slider-pic">
                            <img src="assets/images/slider/slide-1.jpg" alt>
                        </div>
                    </div>
                </div>

                <div class="slide">
                    <div class="container">
                        <div class="row">
                            <div class="col col-lg-6 col-md-8 col-sm-12 slide-caption">
                                <div class="slide-title">
                                    <h2>Women Fashion & Best Discounts</h2>
                                </div>
                                <div class="slide-subtitle">
                                    <p>It was popularised in the 1960s with the release sheets. We bring the right
                                        people together</p>
                                </div>
                                <div class="btns">
                                    <a href="shop.html" class="theme-btn">Explore More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-pic">
                        <img src="assets/images/slider/slide-2.jpg" alt>
                    </div>
                </div>
                <div class="slide">
                    <div class="container">
                        <div class="row">
                            <div class="col col-lg-6 col-md-8 col-sm-12 slide-caption">
                                <div class="slide-title">
                                    <h2>New fashion sale Women Fashion</h2>
                                </div>
                                <div class="slide-subtitle">
                                    <p>It was popularised in the 1960s with the release sheets. We bring the right
                                        people together</p>
                                </div>
                                <div class="btns">
                                    <a href="shop.html" class="theme-btn">Explore More</a>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-pic">
                        <img src="assets/images/slider/slide-3.jpg" alt>
                    </div>
                </div>
                <div class="slide">
                    <div class="container">
                        <div class="row">
                            <div class="col col-lg-6 col-md-8 col-sm-12 slide-caption">
                                <div class="slide-title">
                                    <h2>Winter-spring 2023!</h2>
                                </div>
                                <div class="slide-subtitle">
                                    <p>It was popularised in the 1960s with the release sheets. We bring the right
                                        people together</p>
                                </div>
                                <div class="btns">
                                    <a href="shop.html" class="theme-btn">Explore More</a>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-pic">
                        <img src="assets/images/slider/slide-4.jpg" alt>
                    </div>
                </div>
                <div class="slide">
                    <div class="container">
                        <div class="row">
                            <div class="col col-lg-6 col-md-8 col-sm-12 slide-caption">
                                <div class="slide-title">
                                    <h2>Unique Furniture Style</h2>
                                </div>
                                <div class="slide-subtitle">
                                    <p>It was popularised in the 1960s with the release sheets. We bring the right
                                        people together</p>
                                </div>
                                <div class="btns">
                                    <a href="shop.html" class="theme-btn">Explore More</a>

                                </div>
                            </div>
                        </div>
                        <div class="slider-pic">
                            <img src="assets/images/slider/slide-5.jpg" alt>
                        </div>
                    </div>
                </div>
        </section>
        <!-- end of wpo-hero-section-1 -->

        <!-- start of pengu-product-section -->
        <section class="pengu-product-section section-padding">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-12">
                        <div class="wpo-section-title">
                            <h2>New Arraival</h2>
                            <p>Here is our new arraival products that you may like.</p>
                        </div>
                    </div>
                </div>
                <div class="product-wrap">
                    <div class="row">
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="product-single-item">
                                <div class="image">
                                    <img src="assets/images/product-single/1.jpg" alt="">

                                    <ul class="cart-wrap">
                                        <li>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Add To Cart"><i class="fi flaticon-shopping-cart"></i></a>
                                        </li>
                                        <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                            <button data-bs-toggle="tooltip" data-bs-html="true" title="Quick View"><i
                                                    class="fi ti-eye"></i></button>
                                        </li>
                                        <li>
                                            <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Checkout"><i class="fa fa-credit-card"
                                                    aria-hidden="true"></i></a>
                                        </li>
                                    </ul>
                                    <div class="shop-btn">
                                        <a class="product-btn" href="shop.html">Shop Now</a>
                                    </div>
                                </div>
                                <div class="text">
                                    <h2><a href="product-single.html">Long Sleeve Tops</a></h2>
                                    <div class="price">
                                        <del class="old-price">$85.50</del>
                                        <span class="present-price">$70.30</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="product-single-item active">
                                <div class="image">
                                    <img src="assets/images/product-single/2.jpg" alt="">

                                    <ul class="cart-wrap">
                                        <li>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Add To Cart"><i class="fi flaticon-shopping-cart"></i></a>
                                        </li>
                                        <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                            <button data-bs-toggle="tooltip" data-bs-html="true" title="Quick View"><i
                                                    class="fi ti-eye"></i></button>
                                        </li>
                                        <li>
                                            <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Checkout"><i class="fa fa-credit-card"
                                                    aria-hidden="true"></i></a>
                                        </li>
                                    </ul>
                                    <div class="shop-btn">
                                        <a class="product-btn" href="shop.html">Shop Now</a>
                                    </div>
                                </div>
                                <div class="text">
                                    <h2><a href="product-single.html">White Wedding Shoe</a></h2>
                                    <div class="price">
                                        <del class="old-price">$150.20</del>
                                        <span class="present-price">$120.50</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="product-single-item">
                                <div class="image">
                                    <img src="assets/images/product-single/3.jpg" alt="">

                                    <ul class="cart-wrap">
                                        <li>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Add To Cart"><i class="fi flaticon-shopping-cart"></i></a>
                                        </li>
                                        <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                            <button data-bs-toggle="tooltip" data-bs-html="true" title="Quick View"><i
                                                    class="fi ti-eye"></i></button>
                                        </li>
                                        <li>
                                            <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Checkout"><i class="fa fa-credit-card"
                                                    aria-hidden="true"></i></a>
                                        </li>
                                    </ul>
                                    <div class="shop-btn">
                                        <a class="product-btn" href="shop.html">Shop Now</a>
                                    </div>
                                </div>
                                <div class="text">
                                    <h2><a href="product-single.html">Long Chain With Lockel</a></h2>
                                    <div class="price">
                                        <del class="old-price">$85.50</del>
                                        <span class="present-price">$70.30</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="product-single-item">
                                <div class="image">
                                    <img src="assets/images/product-single/4.jpg" alt="">

                                    <ul class="cart-wrap">
                                        <li>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Add To Cart"><i class="fi flaticon-shopping-cart"></i></a>
                                        </li>
                                        <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                            <button data-bs-toggle="tooltip" data-bs-html="true" title="Quick View"><i
                                                    class="fi ti-eye"></i></button>
                                        </li>
                                        <li>
                                            <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Checkout"><i class="fa fa-credit-card"
                                                    aria-hidden="true"></i></a>
                                        </li>
                                    </ul>
                                    <div class="shop-btn">
                                        <a class="product-btn" href="shop.html">Shop Now</a>
                                    </div>
                                </div>
                                <div class="text">
                                    <h2><a href="product-single.html">Winter Jacket</a></h2>
                                    <div class="price">
                                        <del class="old-price">$100.50</del>
                                        <span class="present-price">$80.30</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end of pengu-product-section -->

        <!-- start of pengu-banner-section -->
        <section class="pengu-banner-section">
            <div class="container">
                <div class="banner-wrap">
                    <div class="row">
                        <div class="col-lg-7 col-md-9 col-12">
                            <div class="content">
                                <div class="bg-text">
                                    <h1>fasion</h1>
                                </div>
                                <h2>Stylish casual
                                    sweater & sneakers</h2>
                                <p>Beautiful, Fashionable and Stylish</p>
                                <a href="shop.html">Shop Now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end of pengu-banner-section -->

        <!-- start of pengu-product-category-section -->
        <section class="pengu-product-category-section section-padding">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-12">
                        <div class="wpo-section-title">
                            <h2>Popular Products</h2>
                            <p>Here is our new arraival products that you may like.</p>
                        </div>
                    </div>
                </div>
                <div class="category-wrap">
                    <div class="row">
                        <div class="col col-xs-12 sortable-gallery">
                            <div class="gallery-container gallery-fancybox masonry-gallery row">
                                <div class="col-lg-3 col-md-6 col-12 custom-grid IllustAtor all sales women zoomIn"
                                    data-wow-duration="2000ms">
                                    <div class="product-single-item">
                                        <div class="image">
                                            <img src="assets/images/product-category/1.jpg" alt="">
                                            <ul class="cart-wrap">
                                                <li>
                                                    <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Add To Cart"><i
                                                            class="fi flaticon-shopping-cart"></i></a>
                                                </li>
                                                <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                                    <button data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Quick View"><i class="fi ti-eye"></i></button>
                                                </li>
                                                <li>
                                                    <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Checkout"><i class="fa fa-credit-card"
                                                            aria-hidden="true"></i></a>
                                                </li>
                                            </ul>
                                            <div class="shop-btn">
                                                <a class="product-btn" href="shop.html">Shop Now</a>
                                            </div>
                                        </div>
                                        <div class="text">
                                            <h2><a href="product-single.html">Long Sleeve Tops</a></h2>
                                            <div class="price">
                                                <del class="old-price">$85.50</del>
                                                <span class="present-price">$70.30</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-12 custom-grid all  women men offers kids zoomIn"
                                    data-wow-duration="2000ms">
                                    <div class="product-single-item">
                                        <div class="image">
                                            <img src="assets/images/product-category/2.jpg" alt="">
                                            <ul class="cart-wrap">
                                                <li>
                                                    <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Add To Cart"><i
                                                            class="fi flaticon-shopping-cart"></i></a>
                                                </li>
                                                <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                                    <button data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Quick View"><i class="fi ti-eye"></i></button>
                                                </li>
                                                <li>
                                                    <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Checkout"><i class="fa fa-credit-card"
                                                            aria-hidden="true"></i></a>
                                                </li>
                                            </ul>
                                            <div class="shop-btn">
                                                <a class="product-btn" href="shop.html">Shop Now</a>
                                            </div>
                                        </div>
                                        <div class="text">
                                            <h2><a href="product-single.html">White Wedding Shoe</a></h2>
                                            <div class="price">
                                                <del class="old-price">$150.50</del>
                                                <span class="present-price">$120.30</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-12 custom-grid all women men offers kids zoomIn"
                                    data-wow-duration="2000ms">
                                    <div class="product-single-item">
                                        <div class="image">
                                            <img src="assets/images/product-category/3.jpg" alt="">
                                            <ul class="cart-wrap">
                                                <li>
                                                    <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Add To Cart"><i
                                                            class="fi flaticon-shopping-cart"></i></a>
                                                </li>
                                                <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                                    <button data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Quick View"><i class="fi ti-eye"></i></button>
                                                </li>
                                                <li>
                                                    <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Checkout"><i class="fa fa-credit-card"
                                                            aria-hidden="true"></i></a>
                                                </li>
                                            </ul>
                                            <div class="shop-btn">
                                                <a class="product-btn" href="shop.html">Shop Now</a>
                                            </div>
                                        </div>
                                        <div class="text">
                                            <h2><a href="product-single.html">Long Chain With Lockel</a></h2>
                                            <div class="price">
                                                <del class="old-price">$180.50</del>
                                                <span class="present-price">$150.30</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-12 custom-grid women  kids all zoomIn"
                                    data-wow-duration="2000ms">
                                    <div class="product-single-item">
                                        <div class="image">
                                            <img src="assets/images/product-category/4.jpg" alt="">
                                            <ul class="cart-wrap">
                                                <li>
                                                    <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Add To Cart"><i
                                                            class="fi flaticon-shopping-cart"></i></a>
                                                </li>
                                                <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                                    <button data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Quick View"><i class="fi ti-eye"></i></button>
                                                </li>
                                                <li>
                                                    <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Checkout"><i class="fa fa-credit-card"
                                                            aria-hidden="true"></i></a>
                                                </li>
                                            </ul>
                                            <div class="shop-btn">
                                                <a class="product-btn" href="shop.html">Shop Now</a>
                                            </div>
                                        </div>
                                        <div class="text">
                                            <h2><a href="product-single.html">Winter Jacket </a></h2>
                                            <div class="price">
                                                <del class="old-price">$100.50</del>
                                                <span class="present-price">$70.30</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-12 all custom-grid  women sales kidszoomIn"
                                    data-wow-duration="2000ms">
                                    <div class="product-single-item">
                                        <div class="image">
                                            <img src="assets/images/product-category/5.jpg" alt="">
                                            <ul class="cart-wrap">
                                                <li>
                                                    <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Add To Cart"><i
                                                            class="fi flaticon-shopping-cart"></i></a>
                                                </li>
                                                <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                                    <button data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Quick View"><i class="fi ti-eye"></i></button>
                                                </li>
                                                <li>
                                                    <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Checkout"><i class="fa fa-credit-card"
                                                            aria-hidden="true"></i></a>
                                                </li>
                                            </ul>
                                            <div class="shop-btn">
                                                <a class="product-btn" href="shop.html">Shop Now</a>
                                            </div>
                                        </div>
                                        <div class="text">
                                            <h2><a href="product-single.html">Long Sleeve Tops</a></h2>
                                            <div class="price">
                                                <del class="old-price">$85.50</del>
                                                <span class="present-price">$70.30</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-12 custom-grid all men offers zoomIn"
                                    data-wow-duration="2000ms">
                                    <div class="product-single-item">
                                        <div class="image">
                                            <img src="assets/images/product-category/6.jpg" alt="">
                                            <ul class="cart-wrap">
                                                <li>
                                                    <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Add To Cart"><i
                                                            class="fi flaticon-shopping-cart"></i></a>
                                                </li>
                                                <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                                    <button data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Quick View"><i class="fi ti-eye"></i></button>
                                                </li>
                                                <li>
                                                    <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Checkout"><i class="fa fa-credit-card"
                                                            aria-hidden="true"></i></a>
                                                </li>
                                            </ul>
                                            <div class="shop-btn">
                                                <a class="product-btn" href="shop.html">Shop Now</a>
                                            </div>
                                        </div>
                                        <div class="text">
                                            <h2><a href="product-single.html">White Wedding Shoe</a></h2>
                                            <div class="price">
                                                <del class="old-price">$120.50</del>
                                                <span class="present-price">$100.30</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-12 custom-grid all  men  zoomIn"
                                    data-wow-duration="2000ms">
                                    <div class="product-single-item">
                                        <div class="image">
                                            <img src="assets/images/product-category/7.jpg" alt="">
                                            <ul class="cart-wrap">
                                                <li>
                                                    <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Add To Cart"><i
                                                            class="fi flaticon-shopping-cart"></i></a>
                                                </li>
                                                <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                                    <button data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Quick View"><i class="fi ti-eye"></i></button>
                                                </li>
                                                <li>
                                                    <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Checkout"><i class="fa fa-credit-card"
                                                            aria-hidden="true"></i></a>
                                                </li>
                                            </ul>
                                            <div class="shop-btn">
                                                <a class="product-btn" href="shop.html">Shop Now</a>
                                            </div>
                                        </div>
                                        <div class="text">
                                            <h2><a href="product-single.html">Long Chain With Lockel</a></h2>
                                            <div class="price">
                                                <del class="old-price">$150.50</del>
                                                <span class="present-price">$130.30</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-6 col-12 custom-grid all  men  zoomIn"
                                    data-wow-duration="2000ms">
                                    <div class="product-single-item">
                                        <div class="image">
                                            <img src="assets/images/product-category/8.jpg" alt="">
                                            <ul class="cart-wrap">
                                                <li>
                                                    <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Add To Cart"><i
                                                            class="fi flaticon-shopping-cart"></i></a>
                                                </li>
                                                <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                                    <button data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Quick View"><i class="fi ti-eye"></i></button>
                                                </li>
                                                <li>
                                                    <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Checkout"><i class="fa fa-credit-card"
                                                            aria-hidden="true"></i></a>
                                                </li>
                                            </ul>
                                            <div class="shop-btn">
                                                <a class="product-btn" href="shop.html">Shop Now</a>
                                            </div>
                                        </div>
                                        <div class="text">
                                            <h2><a href="product-single.html">Winter Jacket </a></h2>
                                            <div class="price">
                                                <del class="old-price">$100.50</del>
                                                <span class="present-price">$70.30</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end of pengu-product-category-section -->

        <!-- start of pengu-spacing-section -->
        <section class="pengu-spacing-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-12">
                        <div class="lookbook-benner">
                            <div class="bg-image">
                                <img src="assets/images/lookbook.jpg" alt="">
                            </div>
                            <div class="content">
                                <h2>LOOKBOOK 2023</h2>
                                <p>Best fasionable brand in the world</p>
                                <a class="theme-btn" href="shop.html">View Collection</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-12">
                        <div class="winter-benner">
                            <div class="bg-image">
                                <img src="assets/images/winter.jpg" alt="">
                            </div>
                            <div class="content">
                                <span>Winter Sale</span>
                                <h2>UP TO 70% OFF</h2>
                                <a class="theme-btn" href="shop.html">Shop Now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end of pengu-spacing-section -->

        <!-- start of pengu-bestseller-section -->
        <section class="pengu-bestseller-section section-padding">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-12">
                        <div class="wpo-section-title">
                            <h2>Best Seller</h2>
                            <p>Top sale in this week and this season.</p>
                        </div>
                    </div>
                </div>
                <div class="bestseller-wrap">
                    <div class="row">
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="product-single-item">
                                <div class="image">
                                    <img src="assets/images/bestseller/img-1.jpg" alt="">

                                    <ul class="cart-wrap">
                                        <li>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Add To Cart"><i class="fi flaticon-shopping-cart"></i></a>
                                        </li>
                                        <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                            <button data-bs-toggle="tooltip" data-bs-html="true" title="Quick View"><i
                                                    class="fi ti-eye"></i></button>
                                        </li>
                                        <li>
                                            <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Checkout"><i class="fa fa-credit-card"
                                                    aria-hidden="true"></i></a>
                                        </li>
                                    </ul>
                                    <div class="shop-btn">
                                        <a class="product-btn" href="shop.html">Shop Now</a>
                                    </div>
                                </div>
                                <div class="text">
                                    <h2><a href="product-single.html">Long Sleeve Tops</a></h2>
                                    <div class="price">
                                        <del class="old-price">$850.50</del>
                                        <span class="present-price">$70.30</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="product-single-item">
                                <div class="image">
                                    <img src="assets/images/bestseller/img-2.jpg" alt="">

                                    <ul class="cart-wrap">
                                        <li>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Add To Cart"><i class="fi flaticon-shopping-cart"></i></a>
                                        </li>
                                        <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                            <button data-bs-toggle="tooltip" data-bs-html="true" title="Quick View"><i
                                                    class="fi ti-eye"></i></button>
                                        </li>
                                        <li>
                                            <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Checkout"><i class="fa fa-credit-card"
                                                    aria-hidden="true"></i></a>
                                        </li>
                                    </ul>
                                    <div class="shop-btn">
                                        <a class="product-btn" href="shop.html">Shop Now</a>
                                    </div>
                                </div>
                                <div class="text">
                                    <h2><a href="product-single.html">White Wedding Shoe</a></h2>
                                    <div class="price">
                                        <del class="old-price">$150.50</del>
                                        <span class="present-price">$120.30</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="product-single-item">
                                <div class="image">
                                    <img src="assets/images/bestseller/img-3.jpg" alt="">

                                    <ul class="cart-wrap">
                                        <li>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Add To Cart"><i class="fi flaticon-shopping-cart"></i></a>
                                        </li>
                                        <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                            <button data-bs-toggle="tooltip" data-bs-html="true" title="Quick View"><i
                                                    class="fi ti-eye"></i></button>
                                        </li>
                                        <li>
                                            <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Checkout"><i class="fa fa-credit-card"
                                                    aria-hidden="true"></i></a>
                                        </li>
                                    </ul>
                                    <div class="shop-btn">
                                        <a class="product-btn" href="shop.html">Shop Now</a>
                                    </div>
                                </div>
                                <div class="text">
                                    <h2><a href="product-single.html">Long Chain With Lockel</a></h2>
                                    <div class="price">
                                        <del class="old-price">$85.50</del>
                                        <span class="present-price">$60.30</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="product-single-item">
                                <div class="image">
                                    <img src="assets/images/bestseller/img-4.jpg" alt="">

                                    <ul class="cart-wrap">
                                        <li>
                                            <a href="cart.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Add To Cart"><i class="fi flaticon-shopping-cart"></i></a>
                                        </li>
                                        <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                            <button data-bs-toggle="tooltip" data-bs-html="true" title="Quick View"><i
                                                    class="fi ti-eye"></i></button>
                                        </li>
                                        <li>
                                            <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                title="Checkout"><i class="fa fa-credit-card"
                                                    aria-hidden="true"></i></a>
                                        </li>
                                    </ul>
                                    <div class="shop-btn">
                                        <a class="product-btn" href="shop.html">Shop Now</a>
                                    </div>
                                </div>
                                <div class="text">
                                    <h2><a href="product-single.html">Winter Jacket</a></h2>
                                    <div class="price">
                                        <del class="old-price">$100.50</del>
                                        <span class="present-price">$80.30</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>
        <!-- end of pengu-bestseller-section -->

        <!-- start of wpo-site-footer-section -->
        <footer class="wpo-site-footer">
            <div class="wpo-upper-footer">
                <div class="container">
                    <div class="row">
                        <div class="col col-lg-4 col-md-6 col-sm-12 col-12">
                            <div class="widget about-widget">
                                <div class="logo widget-title">
                                    <img src="assets/images/logo.svg" alt="blog">
                                </div>
                                <p>Mattis inelit neque quis donecyir eleng amet.
                                    Amet sed et cursus eu euiod.
                                    Egestaerets in morbiet tristique ornare vulputate vitae enim.</p>
                            </div>
                        </div>
                        <div class="col col-lg-4 col-md-6 col-sm-12 col-12">
                            <div class="widget link-widget">
                                <h4>Easy 30 days returns</h4>
                                <p>30 days money back guarantee</p>
                                <h4>International Warranty</h4>
                                <p>Offered in the country of usage</p>
                                <h4>100% Secure Checkout</h4>
                                <p>PayPal/ MasterCard / Visa</p>
                            </div>
                        </div>

                        <div class="col col-lg-4 col-md-6 col-sm-12 col-12">
                            <div class="widget newsletter-widget">
                                <div class="widget-title">
                                    <h3>Newsletter</h3>
                                </div>
                                <p>Subscribe to our newsletter and get 10% off your first purchase.</p>
                                <form>
                                    <div class="input-1">
                                        <input type="email" class="form-control" placeholder="Your Email Address.. "
                                            required="">
                                    </div>
                                    <div class="submit clearfix">
                                        <button type="submit">Subscribe</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div> <!-- end container -->
            </div>
            <div class="wpo-lower-footer">
                <div class="container">
                    <div class="row">
                        <div class="col col-xs-12">
                            <p class="copyright"> Copyright &copy; 2023 Canun By <a
                                    href="http://www.bootstrapmb.com">bootstrapMB</a>. All
                                Rights Reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end of wpo-site-footer-section -->

        <!-- popup-quickview  -->
        <div id="popup-quickview" class="modal fade" tabindex="-1">
            <div class="modal-dialog quickview-dialog">
                <div class="modal-content">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="ti-close"></i></button>
                    <div class="modal-body d-flex">
                        <div class="product-details">
                            <div class="row align-items-center">
                                <div class="col-lg-5">
                                    <div class="product-single-img">
                                        <div class="modal-product">
                                            <div class="item">
                                                <img src="assets/images/modal.jpg" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-7">
                                    <div class="product-single-content">
                                        <h5>White Wedding Shoe</h5>
                                        <h6>120.00 USD</h6>
                                        <ul class="rating">
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                            <li><i class="fa" aria-hidden="true"></i></li>
                                        </ul>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis ultrices
                                            lectus lobortis, dolor et tempus porta, leo mi efficitur ante, in varius
                                            felis
                                            sem ut mauris. Proin volutpat lorem inorci sed vestibulum tempus. Lorem
                                            ipsum
                                            dolor sit amet, consectetur adipiscing elit. Aliquam
                                            hendrerit.
                                        </p>
                                        <form class="addToCart needs-validation" novalidate>
                                            <div class="product-filter-item color">
                                                <div class="color-name">
                                                    <span>Color :</span>
                                                    <ul>
                                                        <!-- 演示例子，可删除 -->


                                                        {% for color in goods.colors %}
                                                        <li><input id="{{ color }}" type="radio" name="color"
                                                                value="{{ color }}">
                                                            <label for="{{ color }}"
                                                                style="background:{{ color }}"></label>
                                                        </li>
                                                        {% endfor %}
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="product-filter-item color filter-size">
                                                <div class="color-name">
                                                    <span>Weight :</span>
                                                    <ul>
                                                        <li class="color"><input id="wa1" type="radio" name="size"
                                                                value="30">
                                                            <label for="wa1">4L</label>
                                                        </li>

                                                        {% for color in goods.size %}
                                                        <li class="color"><input id="{{size}}" type="radio" name="size"
                                                                value="{{size}}">
                                                            <label for="{{size}}">{{size}}</label>
                                                        </li>
                                                        {% endfor %}
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="pro-single-btn">
                                                <div class="quantity cart-plus-minus">
                                                    <input type="text" value="1">
                                                    <div class="dec qtybutton">-</div>
                                                    <div class="inc qtybutton"></div>
                                                </div>
                                                <a href="#" class="submit theme-btn">Add to cart</a>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- popup-quickview -->
        </div>

    </div>
    <!-- end of page-wrapper -->

    <!-- All JavaScript files
    ================================================== -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <!-- Plugins for this template -->
    <script src="assets/js/modernizr.custom.js"></script>
    <script src="assets/js/jquery.dlmenu.js"></script>
    <script src="assets/js/jquery-plugin-collection.js"></script>
    <!-- Custom script for this template -->
    <script src="assets/js/script.js"></script>
    <script>
        $(function () {
            // 将选中信息提交到服务器
            function sumitInfo() {
                $.ajax({
                    url: `/web/cart/?id=${1}`,
                    type: 'get',
                    data: {
                        color: $('.addToCart input[name="color"]').val(),
                        size: $('.addToCart input[name="size"]').val()
                    },
                    success: function (result) {
                        //回调函数 

                    }
                });
            }

            // 提交颜色
            $('.addToCart input[name="color"]').change(function () {
                sumitInfo()
            });

            // 提交尺寸
            $('.addToCart input[name="size"]').change(function () {
                sumitInfo()
            });
        })
    </script>
</body>

</html>